<template>
    <div>
        <div class="page-title">编辑指南分类</div>
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="分类名称.">
                <el-input ref="name" v-model="form.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>

            <el-form-item label="所属分类.">
                <el-select ref="type" v-model="form.type" placeholder="-- 请选择分类 --">
                    <el-option label="顶级分类" value="0"></el-option>
                    <el-option v-for="i in options" :key="i" :label="i.name" :value="i.id"></el-option>
                </el-select>
                <el-tooltip content="分类不能修改到自己或者子分类下" placement="right" effect="light">
                    <template>
                        <i class="el-icon-info"></i>
                    </template>
                </el-tooltip>
            </el-form-item>

            <el-form-item label="分类排序.">
                <el-input ref="sort" v-model="form.sort" placeholder="请输入分类排序，（ 非必填，默认为0 ）"></el-input>
            </el-form-item>

            <el-form-item label="分类状态.">
                <el-switch v-model="form.status" active-color="#f8c15c"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="success" icon="el-icon-check" @click="submit">修改</el-button>
                <el-button icon="el-icon-close" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {
        get,
        put
    } from '@/network/request'

    export default {
        name: 'EditGuideType',
        data() {
            return {
                form: {
                    id: this.$route.params.id,
                    cid: sessionStorage.getItem('cid'),
                    name: '',
                    type: '',
                    sort: '',
                    status: false
                },
                options: [], // 分类数组
            }
        },
        mounted() {
            this.$nextTick(() => {
                // 获取信息
                get('/getGuideType', {
                    id: this.$route.params.id,
                    cid: sessionStorage.getItem('cid')
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.form.name = result.data.name
                        this.form.sort = result.data.sort
                        this.form.type = (result.data.pid != 0) ? result.data.pid : '顶级分类'
                        this.form.status = (result.data.status == 1) ? true : false
                    } else {
                        this.$router.push('/404')
                    }
                }).catch()

                // 获取分类
                get('/selectGuideType', {
                    cid: sessionStorage.getItem('cid')
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.options = result.data
                    }
                }).catch()
            })
        },
        methods: {
            // 提交
            submit() {
                if (this.form.name == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入分类名称',
                        offset: 70
                    })
                    this.$refs['name'].focus()
                    return false
                }

                if (this.form.type == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请选择分类',
                        offset: 70
                    })
                    this.$refs['type'].focus()
                    return false
                }

                put('/modifyGuideType', this.form).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.$notify.success({
                            title: '系统提示',
                            message: '分类修改成功',
                            offset: 70
                        })
                        this.$router.push('/guideType')
                    } else {
                        this.$notify.error({
                            title: '系统提示',
                            message: '分类修改失败',
                            offset: 70
                        })
                    }
                }).catch()
            },
            // 取消
            cancel() {
                this.$router.push('/guideType')
            }
        }
    }
</script>

<style>
</style>